{extend name="common/dialog" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/common/css/jquery-ui.css" media="all">
<script type="text/javascript" src="__STATIC__/common/js/jquery-ui.js"></script>
<style type="text/css">
    @media screen and (min-width: 768px){
      .layui-container {
          width: 95%;
      }
    }
    .alip-cloud,.cloud-aws,.cloud-alip,.aws-cloud{display: none;}
    .benduan{}
    .mradio-group{max-height: 400px;overflow-y: auto;}
    .mradio-group li{padding:5px 10px;position: relative;border:1px solid #ccc; border-radius: 4px; margin: 5px 0;width: 93%;}
    .mradio-group li ._radio,.mradio-group li .layui-form-radio{position: absolute;top: 6px;right: -15px;}
    .bottom-btnview{position: fixed;bottom:40px;right: 20px;font-size: 16px;}
    .bottom-priceview{position: fixed;bottom:10px;right: 20px;font-size: 14px;}
    .bottom-priceview #price-money{font-size: 16px;}
    .body-back{background-color: #fff;}
</style>
<!--联动参数-->
<script type="text/javascript">
   
</script>
{/block}
{block name="main"}
<div class="layui-container" style="padding: 0;">
  <!--head btn-->
    <div class="layui-btn-group tab-btn tab-view-btns" style="float: right;">
      <button class="layui-btn tab-active" data-id="#view-tab-1" id="_view-tab-1">{:lang('Basic Information')}</button>
      <button class="layui-btn" data-id="#view-tab-2" id="_view-tab-2" >{:lang('Local Access')}</button>
      <button class="layui-btn" data-id="#view-tab-3" id="_view-tab-3">{:lang('End-to-end access')}</button>
  </div>
  <div style="clear:both;height:30px;"></div>
  <!--head btn end-->
  <!--content start-->
  <div class="view-content" style="margin:15px 0;">
    
    <!--基本信息-->
    <div class="view-tab" id="view-tab-1">
    <form class="layui-form nerwork-like" id="_form1">
        <input type="hidden" name="id" value="{$row['id']}">
        <input type="hidden" name="cat" value="{$cat}">
        <input type="hidden" name="is_sn" value="{$row['is_sn']}">
        <input type="hidden" name="form_type" value="{$form_type}">

        <div class="layui-col-xs6" style="padding-right: 25px;">
            <div class="form-item">
              <div class="form-label">* {:lang('Line Name')}</div>
              <div class="form-value">
                <input type="text" name="name" lay-verify="required" class="layui-input" value="{$row['name']}" placeholder="{:lang('Please Enter The Name')}" >
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">* {:lang('Bandwidth')} <span style="color: #999;">MAX：2000Mbps</span></div>
              <div class="form-value">
                
                <div class="form-value broadbandinput" >
                <label class="broadband-label">
                      
                      <input type="text" id="_broadband" value="{$row['broadband']}" name="broadband"  lay-verify="required" data-title="{:lang('Please enter broadband values')}" class="layui-input" placeholder="0" >
                      <span class="autobtn"></span>
                      <span class="_add"></span>
                      <span class="_min"></span>
                  </label> 
                
              </div>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">* {:lang('Purchase Time')}</div>
              <div class="form-value">
                 <select name="daylength"  lay-filter="_daylength" lay-verify="required" id="daylength">
                     <option value="">{:lang('Please Choose')}</option>
                     <?php foreach($daLength as $dindex=>$d):?>
                      <option value="{$dindex}" <?php if($row['daylength'] ==$dindex){echo "selected";}?> >{$d}</option>
                      <?php endforeach;?>
                  </select>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"> {:lang('Planned opening time')}</div>
              <div class="form-value">
                 <input type="text" id="plan_time" readonly="" value="{$row['plan_time']}" name="plan_time" placeholder="" class="datetime-icon">
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"> {:lang('Remarks')}</div>
              <div class="form-value">
                 <textarea placeholder="{:lang('Please enter content')}" id="_create_remarks" name="remarks" class="layui-input" style="width:99%;height: 40px;">{$row['remarks']}</textarea>
              </div>
            </div>
            
        </div>
        <div class="layui-col-xs6" style="padding-left: 25px;">
        </div>
        <div class="bottom-btnview">
          <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="submit1">{:lang('_Next')} <i class="icon icon-arrow-right2"></i></button>
        </div>
    </form>
    </div>
    <!--基本信息 end-->
    <!--本端配置-->
    <div class="view-tab" id="view-tab-2" style="display: none;">
      <form class="layui-form nerwork-like" id="_form2">
          <div class="layui-col-xs6" style="padding-right: 25px;">
              
              <div class="form-item">
                <div class="form-label"></div>
                <div class="form-value">
                   <select name="type" lay-filter="_type" data-title="{:lang('Please Select Type')}" lay-verify="required">
                    <option value="">{:lang('Please Select Type')}</option>
                    <?php foreach($types as $index=>$type):?>
                        <option value="{$index}" <?php if($row['type']==$index){echo "selected";}?>>{$type}</option>
                    <?php endforeach;?>
                  </select>
                </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单-->
              <div class="type type-company">
                  <div class="form-item" >
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                      <select name="country_id" lay-filter="countryId" data-value="{$row['city_id']}" class="type-datacenter" data-aid="#city_id">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($popArr as $pop):?>
                          <option value="{$pop['id']}" <?php if($pop['id'] == $row['country_id']){echo "selected";}?> data-icon="{$pop['icon']}" > {$pop['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      <select name="city_id" data-value="{$row['pop_id']}" data-pid="0" class="type-datacenter" data-aid="#pop_id" id="city_id" lay-filter="cityId">
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('POP')}</div>
                    <div class="form-value">
                       <select name="pop_id" id="pop_id" class="type-datacenter" lay-filter="popId"></select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label"> {:lang('End Access Address')}</div>
                    <div class="form-value">
                       <input type="text" name="access_addr" value="{$row['access_addr']}" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                    </div>
                  </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单 end-->
              <!--公有云-->
              <div class="type type-publc">
                  <div class="form-item">
                    <div class="form-label">* {:lang('Gong Youyun')}</div>
                    <div class="form-value">
                       <select name="local_cloud_id" data-aid="#localcloudaddrid" data-value="{$row['country_id']}" class="type-publcc" lay-filter="localcloudid">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($clouds as $cloud):?>
                          <option value="{$cloud['id']}" <?php if($cloud['id']==$row['local_cloud_id']){echo "selected";}?>  data-icon="{$cloud['icon']}" >{$cloud['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                          <select name="cloud_country"  class="type-publcc" id="localcloudaddrid"  data-value="{$row['city_id']}" lay-filter="localcloudaddrid" data-aid="#cloud_city" >
                            <option value="">{:lang('Local Cloud Connection Area')}</option>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                     <select name="cloud_city" class="type-publcc" id="cloud_city"  data-value="{$row['cloud_conter']}" data-aid="#cloud_conter" lay-filter="cloudCity">
                            <option value="">{:lang('Local Access City')}</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('Cloud Data Center')}</div>
                    <div class="form-value">
                       <select name="cloud_conter"  data-value="{$row['cloud_conter']}" id="cloud_conter">
                            <option value="">{:lang('Please Choose')}</option>
                        </select>
                    </div>
                  </div>
                  <div class="form-item" id="a-account">
                    <div class="form-label">* {:lang('Account ID')}</div>
                    <div class="form-value">
                      <input type="text" name="local_cloud_userid" value="{$row['local_cloud_userid']}" placeholder="{:lang('Please enter the account ID')}" class="layui-input type-publcc">
                    </div>
                  </div>
                  <div class="form-item a_cloud_hide" style="display: none;">
                    <div class="form-label">* <label id="account_label1">{:lang('auth key')}</label></div>
                    <div class="form-value">
                      <input type="text" name="AauthKey" value="{$row['AauthKey']}" placeholder="" class="layui-input" >
                    </div>
                  </div>
                  
                  <!--阿里云&腾讯云 end-->
                  
              </div>
              <!--公有云 end-->
              <div class="form-item">
                <div class="form-label">* {:lang('End Network')}</div>
                <div class="form-value">
                   <input type="text" name="local_network" value="{$row['local_network']}" lay-verify="required" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                </div>
              </div>
          </div>
          <div class="layui-col-xs6" style="padding-left: 25px;">
              <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
              <div id='cloud-huawei1' style="display: none;">
                  <div class="form-item">
                      <div class="form-label">* {:lang('Order ON.')}</div>
                      <div class="form-value">
                         <input type="text" value="{$row['orderId1']}" name="orderId1" placeholder="{:lang('Please input order number.')}" class="layui-input huawei-input">
                      </div>
                  </div>
                    <div class="form-item">
                        <div class="form-label">* {:lang('VPC ID')}</div>
                        <div class="form-value">
                            <input type="text" value="{$row['VPCID1']}" name="VPCID1" placeholder="{:lang('Please input VPC ID')}" class="layui-input huawei-input">
                        </div>
                  </div>
                  <div class="form-item">
                      <div class="form-label">* {:lang('VPC available area')}</div>
                      <div class="form-value">
                        <input type="text" name="VPC1" value="{$row['VPC1']}" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input huawei-input">
                      </div>
                  </div>
              </div>
          </div>
          <div class="bottom-btnview">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary _prex-btn" data-aid="#view-tab-1"><i class="icon icon-arrow-left2"></i> {:lang('_Back')}</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="submit2">{:lang('_Next')} <i class="icon icon-arrow-right2"></i></button>
          </div>
      </form>
    </div>
    <!--本端配置 end-->
    <!--对端接入-->
    <div class="view-tab" id="view-tab-3" style="display: none;">
      <form class="layui-form nerwork-like" id="_form3">
          <div class="layui-col-xs6" style="padding-right: 25px;">
              
              <div class="form-item">
                <div class="form-label"></div>
                <div class="form-value">
                   <select name="endtype" lay-filter="endtype" data-title="{:lang('Please Select Type')}" lay-verify="required">
                    <option value="">{:lang('Please Select Type')}</option>
                    <?php foreach($types as $index=>$type):?>
                        <option value="{$index}" <?php if($row['endtype']==$index){echo "selected";}?> >{$type}</option>
                    <?php endforeach;?>
                  </select>
                </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单-->
              <div class="etype etype-company" style="display: none;">
                  <div class=" form-item" >
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                      <select name="ecountry_id" lay-filter="ecountryId" data-value="{$row['ecity_id']}" class="etype-datacenter" data-aid="#ecity_id">
                          <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($popArr as $pop):?>
                        <option value="{$pop['id']}" <?php if($pop['id'] == $row['ecountry_id']){echo "selected";}?> data-icon="{$pop['icon']}" >{$pop['name']}</option>
                        <?php endforeach;?>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      
                      <select name="ecity_id" data-pid="0" class="etype-datacenter" data-value="{$row['epop_id']}" data-aid="#epop_id" id="ecity_id" lay-filter="ecityId">
                        </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('POP')}</div>
                    <div class="form-value">
                       
                        <select name="epop_id" id="epop_id" lay-filter="epopId" class="etype-datacenter" > </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label"> {:lang('End to end access address')}</div>
                    <div class="form-value">
                      <input type="text" name="eaccess_addr" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                    </div>
                  </div>
              </div>
              <!--公司机构&数据中心(私有云)类型表单 end-->
              <!--公有云-->
              <div class="etype etype-publc" style="display: none;">
                  <div class="form-item">
                    <div class="form-label">* {:lang('Opposite end Gong Youyun')}</div>
                    <div class="form-value">
                    
                          <select name="endcloudid" data-aid="#endcloudaddrid" data-value="{$row['ecountry_id']}" lay-filter="endcloudid" class="etype-publcc">
                          <option value="">{:lang('Please Choose')}</option>
                          <?php foreach($clouds as $cloud):?>
                          <option value="{$cloud['id']}" <?php if($cloud['id'] == $row['endcloudid']){echo "selected";} ?> data-icon="{$cloud['icon']}" >{$cloud['name']}</option>
                          <?php endforeach;?>
                        </select>
                    </div>
                  </div>
                  <div class="form-item" >
                    <div class="form-label"> {:lang('Area')}</div>
                    <div class="layui-input-inline form-value" style="width: 225px;">
                          <select name="endcloudaddrid"  id="endcloudaddrid" data-value="{$row['ecity_id']}" class="etype-publcc" lay-filter="endCloudaddrid" data-aid="#ecloud_city">
                              <option value="">{:lang('Please Choose')}</option>
                            </select>
                        </select>
                    </div>
                    <div class="layui-input-inline form-value" style="width:calc(100% - 230px);margin-right: 0">
                      <select name="ecloud_city" class="etype-publcc" data-value="{$row['ecloud_conter']}" id="ecloud_city" data-aid="#ecloud_conter" lay-filter="ecloudCity">
                        <option value="">{:lang('Please Choose')}</option>
                        
                      </select>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="form-label">* {:lang('Cloud Data Center')}</div>
                    <div class="form-value">
                       <select name="ecloud_conter"  id="ecloud_conter">
                        <option value="">{:lang('Please Choose')}</option>
                      </select>
                    </div>
                  </div>
                  <!--阿里云&腾讯云 end-->
                  <div class="form-item" id="z-account">
                    <div class="form-label">* {:lang('Account ID')}</div>
                    <div class="form-value">
                      <input type="text" name="end_userid" value="{$row['end_userid']}" placeholder="{:lang('Please enter the account ID')}" class="layui-input etype-publcc">
                    </div>
                  </div>
                  <div class="form-item z_cloud_hide" style="display: none;">
                    <div class="form-label">* <label id="account_label2">{:lang('auth key')}</label></div>
                    <div class="form-value">
                      <input type="text" name="ZauthKey" value="{$row['ZauthKey']}" placeholder="" class="layui-input etype-publcc">
                    </div>
                  </div>
              </div>
              <!--公有云 end-->
              <div class="form-item">
                <div class="form-label">* {:lang('End-to-end Network')}</div>
                <div class="form-value">
                   <input type="text" name="end_network"  value="{$row['end_network']}" lay-verify="required" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                </div>
              </div>

          </div>
          <div class="layui-col-xs6" style="padding-left: 25px;">
              <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
              <div id='cloud-huawei2' style="display: none;">
                  <div class="form-item">
                      <div class="form-label">* {:lang('Order ON.')}</div>
                      <div class="form-value">
                         <input type="text" name="orderId2"  value="{$row['orderId2']}" placeholder="{:lang('Please input order number.')}" class="layui-input huawei-input2">
                      </div>
                  </div>
                    <div class="form-item">
                        <div class="form-label">* {:lang('VPC ID')}</div>
                        <div class="form-value">
                            <input type="text" value="{$row['VPCID2']}" name="VPCID2" placeholder="{:lang('Please input VPC ID')}" class="layui-input huawei-input2">
                        </div>
                  </div>
                  <div class="form-item">
                      <div class="form-label">* {:lang('VPC available area')}</div>
                      <div class="form-value">
                        <input type="text" name="VPC2" value="{$row['VPC2']}" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input huawei-input2">
                      </div>
                  </div>
              </div>
          </div>
          <div class="bottom-btnview">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary _prex-btn" data-aid="#view-tab-2"><i class="icon icon-arrow-left2"></i> {:lang('_Back')} </button>
            <button type="button" id="_submit" class="layui-btn layui-btn-sm layui-btn-normal" data-href="{:url('edit',['network_id'=>$network_id])}" lay-submit="" lay-filter="submit3">{:lang('Save')}</button>
          </div>
      </form>
    </div>
    <!--对端接入 end-->
    
  </div>
  <div class="bottom-priceview">
    <div class="" id="price-money">
      <?php if($row['total'] != '--'):?>
      {:lang('Configuration Cost:')}<span class='price-money'>{$row['total']} / {:lang('Month')}</span>
      <?php else:?>
      <span class='price-money'>{:lang('No service provided')}</span>
      <?php endif;?>
    </div>
  </div>
  <!--content start end-->
</div>
{/block}
{block name="footer"}
<script type="text/javascript" id="network-data">
    <tr>
        <td>{{_name_}}</td>
        <td>{{_tylelabel_}}</td>
        <td>{{_endlabel_}}</td>
        <td>{{_bandwidth_}} (MB)</td>
        <td>{{_daLength_}}</td>
        <td>{{_total_}} / {:lang('Month')}</td>
        <td style="width:100px;">
            <button data-href="{:U('cart/delete')}?_id={{_id_}}" class="layui-btn layui-btn-danger layui-btn-xs _delete">{:lang('Delete')}</button>
            <button data-href="{:U('cart/getData')}?_id={{_id_}}" class="layui-btn  layui-btn-xs _edit" data-aid="{{_id_}}">{:lang('edit')}</button>
        </td>
    </tr>
</script>
<script type="text/javascript" src="__STATIC__/admin/js/linkage.js"></script>
<script>
 
    var _item=1;
    var myDmoe = null;
    var _step1 = false;
    var _step2 = false;
    layui.use(['form', 'layer','laydate','upload'], function () {
        var form = layui.form, layer = layui.layer,$= layui.jquery,laydate = layui.laydate,upload = layui.upload;
        /*设置*/
         setNetwordData({:json_encode($row)},{
            popList:"{:U('pop/popList')}",
            popItems:"{:U('pop/popItems')}",
            getClouList:"{:U('cloud/getClouList')}",
            getCloudCity:"{:U('cloud/getCloudCity')}",
            getCloudItems:"{:U('cloud/getCloudItems')}",
            form:form,
            layer:layer,
          });
        //reloadItem($("#_submit"),form);
        /*监听第一步，基本信息*/
        form.on("submit(submit1)",function(data){
           setTopTab('#view-tab-2');
           if(_step1 === false){
             $('select[name="type"]').next().find('.layui-anim').find(".layui-this").click();
           }
           _step1=true;
        })
        /*监听第一步，基本信息*/
        form.on("submit(submit2)",function(data){
           
           setTopTab('#view-tab-3');
           if(_step2 === false){
             $('select[name="endtype"]').next().find('.layui-anim').find(".layui-this").click();
           } 
           _step2=true;
        })
        $("body").on("click",'#_view-tab-1',function(){
           setTopTab('#view-tab-1');
        })
        $("body").on("click",'#_view-tab-2',function(){
           setTopTab('#view-tab-2');
           if(_step1 === false){
             $('select[name="type"]').next().find('.layui-anim').find(".layui-this").click();
           }
           _step1=true;
        })
        $("body").on("click",'#_view-tab-3',function(){
           setTopTab('#view-tab-3');
           if(_step2 === false){
             $('select[name="endtype"]').next().find('.layui-anim').find(".layui-this").click();
           }
           _step2=true;
        })
        form.on("submit(submit3)",function(data){
           var dataParam = getFormParam();
           loading = layer.load(1,{shade:[0.1,'#fff']});
           _post("{:url('create')}",dataParam,function(res){
                layer.close(loading);
                if (res.code > 0) {
                    var n = res.data;
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                       top.location.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
           })
        })
        /*时间切换*/
        form.on("select(_daylength)",function(obj){
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })

        $("#_broadband").blur(function(){
          var value = parseInt($(this).val());
            if(value < 0 || isNaN(value)){
              value=1;
            }else if(value > 1000){
               value = 1000
            }else if(value > 10 && value <= 1000){
               value = Math.round(value/10)*10
            }
            $(this).val(value)
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*监听上一步*/
        $("body").on('click','._prex-btn',function(){
            var _this = $(this);
            setTopTab(_this.data('aid'))
        })
        /*計劃開通時間*/
        laydate.render({
            elem: '#plan_time',
            lang: 'en',
            min:+1
        }); 
        /*绑定本端接入类型（公司机构、数据中心（私有云）、公有云）*/
        form.on("select(_type)",function(obj){
            if(obj.value == 3){  //公有云
               $(".type").hide(); 
               $(".type-publc").show(); 
               $(".type-publcc").attr('lay-verify',"required");
               $(".type-datacenter").removeAttr('lay-verify',"required");
               //$('select[name="local_cloud_id"]').next().find('.layui-anim').find(".layui-this").click();
            }else if(obj.value > 0){
                $(".type").hide();
                $(".type-company").show(); 
                $(".type-datacenter").attr('lay-verify',"required");
                $(".type-publcc").removeAttr('lay-verify',"required");
                //$('select[name="country_id"]').next().find('.layui-anim').find(".layui-this").click();

                
            }else{
                $(".type").hide(); 
            }
            form.render();
        })
        form.on("select(endtype)",function(obj){

            if(obj.value == 3){  //公有云
               $(".etype").hide(); 
               $(".etype-publc").show(); 
               $(".etype-publcc").attr('lay-verify',"required");
               $(".etype-datacenter").removeAttr('lay-verify',"required");
               //$('select[name="endcloudid"]').next().find('.layui-anim').find(".layui-this").click();
            }else if(obj.value > 0){
                $(".etype").hide();
                $(".etype-company").show(); 
                $(".etype-publcc").removeAttr('lay-verify',"required");
                $(".etype-datacenter").attr('lay-verify',"required");
                //$('select[name="ecountry_id"]').next().find('.layui-anim').find(".layui-this").click();
            }else{
                $(".etype").hide(); 
            }
            form.render();
        })
        /*本端pop点切换*/
        form.on("select(countryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).attr('data-pid',obj.value);
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#pop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var isSelected = false;
           _post("{:U('pop/popList')}",{pid:obj.value},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('')
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option");
                            isSelected = true;
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
                
            })
        })
        /*pop点切换*/
        form.on("select(cityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var isSelected = false;
            _post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('');
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            isSelected  =true;
                            $(doem).append("<option value='"+item.id+"' selected data-address='"+item.address+"'>"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
                
            })
        })
        form.on("select(popId)",function(obj){
            var _addres = $("#pop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='access_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*本端公有云（云列表）*/
        form.on("select(localcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            $("#localcloudaddrid,#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            var isSelected = false;
            var value =  obj.elem.dataset.value;
            if(obj.value > 0){
               
                loading =layer.load(1, {shade: [0.1,'#fff']});
                _post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    layer.close(loading);
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                           if(value == item.id){
                             $(doem).append("<option value='"+item.id+"' selected data-icon='"+item.icon+"'>"+item.name+"</option");
                             isSelected = true;
                           }else{
                             $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' >"+item.name+"</option")
                           }
                        })
                    }
                    form.render();
                    
                })
            }
            $(".a_cloud_hide").hide();
            $(".a_cloud_hide").find("input").removeAttr('lay-verify');
            $("#cloud-huawei1").hide();
            $("#a-account").show();
            $(".huawei-input").removeAttr('lay-verify');
            $("input[name='AauthKey'").attr('placeholder','');
            /*設置label*/
            $("#a-account").find('.type-publcc').attr('lay-verify',"required"); //00000000-0000-0000-0000-000000000000/region/zone
            $("input[name='AauthKey'").attr('placeholder','');
            if(obj.value == 3739){  //Google
                $("#account_label1").text("Pairing key");
                $("#a-account").hide();
                $("#a-account").find('.type-publcc').removeAttr('lay-verify');
                $("input[name='AauthKey'").parents('.form-item').show();
                $("input[name='AauthKey'").attr('lay-verify','required');
                $("input[name='AauthKey'").attr('placeholder','00000000-0000-0000-0000-000000000000/region/zone');
            }else if(obj.value == 3738){ //Azure
                $("#account_label1").text("Service Key");
                $("#a-account").hide();
                $("#a-account").find('.type-publcc').removeAttr('lay-verify');
                $("input[name='AauthKey'").parents('.form-item').show();
                $("input[name='AauthKey'").attr('lay-verify','required');
            }else if(obj.value == 3742){ //華爲云
                $("#cloud-huawei1").show();
                $(".huawei-input").attr('lay-verify','required');
            }else if(obj.value == 3737){  //aws云
                  $(".a_cloud_hide").show();
                  $(".a_cloud_hide").find("input").attr('lay-verify','required');
                  $("#account_label1").text('Auth Key');
            }else{

            }
            form.render();
        })
        /*地区*/
        form.on("select(localcloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            var isSelected = false;
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val()},function(res){
                layer.close(loading);
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                            isSelected = true;
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
                
            })
        })
        /*本端城市*/
        form.on("select(cloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val(),country_id:$("#localcloudaddrid").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                       
                    })
                    form.render();
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:getFormParam(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                
            })
        })
        /*对端公有云（云列表）*/
        form.on("select(endcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#endCloudaddrid,#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            var isSelected = false;
            if(obj.value > 0){
                
                loading =layer.load(1, {shade: [0.1,'#fff']});
                _post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    layer.close(loading);
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                isSelected = true;
                                $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' selected >"+item.name+"</option")
                            }else{
                                $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"' >"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                    
                })
            }
            //$("#end_network_label").text($("#end_network_label").text().replace("*",""))
             $(".z_cloud_hide").hide();
            $(".z_cloud_hide").find("input").removeAttr('lay-verify');
            $("#cloud-huawei2").hide();
            $(".huawei-input2").removeAttr('lay-verify');
            $("#z-account").show();
            $("#z-account").find('.etype-publcc').attr('lay-verify',"required");
            $("input[name='ZauthKey'").attr('placeholder','');
            /*設置label*/
            if(obj.value == 3739){  //Google
                $("#account_label2").text("Pairing key")
                $("#z-account").hide();
                $("#z-account").find('.etype-publcc').removeAttr('lay-verify');
                $("input[name='ZauthKey'").parents('.form-item').show();
                $("input[name='ZauthKey'").attr('lay-verify','required');
                $("input[name='ZauthKey'").attr('placeholder','00000000-0000-0000-0000-000000000000/region/zone');
            }else if(obj.value == 3738){ //Azure
                $("#account_label2").text("Service Key")
                $("input[name='end_userid']").removeAttr('lay-verify');
                $("#z-account").hide();
                $("#z-account").find('.etype-publcc').removeAttr('lay-verify');
                $("input[name='ZauthKey'").parents('.form-item').show();
                $("input[name='ZauthKey'").attr('lay-verify','required');
            }else if(obj.value == 3742){ //華爲云
                $("#cloud-huawei2").show();
                $(".huawei-input2").attr('lay-verify','required');
            }else if(obj.value == 3737){ //AWS
                  $(".z_cloud_hide").show();
                  $(".z_cloud_hide").find("input").attr('lay-verify','required');
                  $("#account_label2").text('Auth Key');
            }else{  //其他
            }
            form.render();
        })
        /*地区*/
        form.on("select(endCloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var isSelected = false;
            _post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='endcloudid']").val()},function(res){
                layer.close(loading);
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            isSelected = true;
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
                
            })
        })

        /*对端城市*/
        form.on("select(ecloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            _post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='endcloudid']").val(),country_id:$("#endcloudaddrid").val()},function(res){
                layer.close(loading);
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:getFormParam(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                form.render();
            })
        })
        /*对端pop点接入*/
        form.on("select(ecountryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            $(doem).attr('data-pid',obj.value);
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#epop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var isSelected = false;
            _post("{:U('pop/popList')}",{pid:obj.value},function(res){
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option");
                            isSelected=true;
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
                
            })
        })
        /*pop点切换*/
        form.on("select(ecityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var isSelected=false;
            _post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                layer.close(loading);
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"' selected >"+item.name+"</option");
                            isSelected=true;
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
                
            })
        })
        form.on("select(epopId)",function(obj){
            var _addres = $("#epop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='eaccess_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:getFormParam(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*编辑数据*/
        layer.close(loading);
    });
    function reloadItem(_this,form){
      
       _post(_this.data('href'),{},function(res){
            _this.removeClass('disabled') 
            if(res.code == 1){
                var field = res.data;
                $("input[name='name']").val(field.name);
                // $('select[name="type"]').next().find('.layui-anim').children('.layui-this').click();
                $("select[name='type']").find("option[value='"+field.type+"']").attr('selected',true);
                $("select[name='endtype']").find("option[value='"+field.endtype+"']").attr('selected',true);
                $("input[name='plan_time']").val(field.plan_time);
                $("input[name='broadband']").val(field.broadband);
                $("select[name='daylength']").find("option[value='"+field.daylength+"']").attr('selected',true);
                $("#_create_remarks").val(field.remarks);      
                $("input[name='local_network']").val(field.local_network);      
                $("input[name='end_network']").val(field.end_network);        
                form.render();
                layer.close(loading);
            }
        })
        
    }
</script>
{/block}